<template>
  <div style="padding: 20px;padding-top: 0;">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="version">
          <div class="layout-flex">
            <div class="title">{{ detailsData.name }}</div>
            <div class="text">版本：{{ detailsData.version }}</div>
          </div>
          <div class="layout-flex">
            <el-button size="small" type="success" :loading="upModeLoding" @click.stop="upMode">更新模型</el-button>
            <el-button size="small" type="primary" @click.stop="interFaceDoc">接口文档</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <p class="describe">
          {{ detailsData.introduce }}
        </p>
      </el-col>
      <el-col :span="12">
        <div class="setbox">
          <div class="set">参数设置</div>
          <el-form ref="form" :model="form" label-width="120px" style="margin: 20px;" :rules="rules" @submit="submit">
            <el-form-item label="阈值设置：" required prop="threshold">
              <div style="">
                <el-input-number v-model="form.threshold" :precision="2" :step="0.1" :min="0.1" :max="1" size="small"
                  style="width: 100%;"></el-input-number>
                <div>
                  <span style="">以上</span>
                  <span style="color: #ccc;">输入0.01与1之间，值越高，准确率越高</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="末级分类：" required prop="level">
              <div style="">
                <el-select v-model="form.level" placeholder="请选择" size="small" style="width: 100%;">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <div style="color: #ccc;">
                  选择级别将输出对应级别识别结果
                </div>
              </div>
            </el-form-item>
            <el-form-item label="待分类内容：" prop="content">
              <el-input type="textarea" placeholder="请输入内容" required :autosize="{ minRows: 6, maxRows: 10 }"
                v-model="form.content" maxlength="500" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
              <div style="text-align: center;">
                <el-button size="small" @click="reduction">还原</el-button>
                <el-button size="small" @click="analysis" type="primary" :loading="loading">开始分析</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="result">
          <h3 style="margin: 0;">识别结果</h3>
          <div style="margin-top: 10px;display: flex;line-height: 20px;">
            <span>分类结果：</span>
            <div style="flex: 1;" v-html="result"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { updateModel, startAnalysis, aiClassifyManageLevel } from "@/api/configure/intelligentClassification";
export default {
  name: "modelIntroduction",
  components: {
  },
  props: {
  },
  inject: ['swichInterFacePage'],
  data() {
    return {
      result: '',
      loading: false,
      classifyId: '',
      upModeLoding: false,
      detailsData: {
        name: '',
        version: '',
        introduce: '',
      },
      form: {
        threshold: 0.5,
        level: '',
        content: '',
      },
      rules: {
        threshold: [
          { required: true, message: '请输入阈值', trigger: 'blur' },
          { pattern: /^(0\.(0[1-9]|[1-9]{1,2}|[1-9]0)$)|^1$/, message: '请输入0到1之间的两位小数', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择末级分类', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入待分类内容', trigger: 'blur' },
          { min: 2, max: 500, message: '输入2至500之间字符', trigger: 'blur' },
          // { pattern: /^[ ]*$/, message: '内容不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => { // eslint-disable-line
              var regex = /^\s*$/; // 正则表达式，^表示开头，\s*表示0或多个空白字符（包括空格、制表符等），$表示结尾
              if (regex.test(value)) {
                callback(new Error('内容不能为空'));
              } else {
                callback()
              }
            }, trigger: 'blur', message: '内容不能为空'
          }
        ],
      },
      option: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '阈值设置',
            prop: 'threshold',
            span: 24,
          },

        ]
      },
      options: [],
    };
  },

  watch: {

  },
  computed: {

  },
  mounted() {
  },
  methods: {
    reduction() {
      this.form.threshold = 0.5
      // this.result = ''
      this.form.content = ''
    },
    analysis() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submit(this.form)
        } else {
          return false
        }
      })
    },
    submit(form) {
      this.loading = true
      startAnalysis({ ...form, id: this.classifyId }).then((res) => {
        console.log(res)
        if (res.data.success) {
          this.result = res.data.data
          this.$message({
            message: '分析成功',
            type: 'success'
          });
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    upMode() {
      this.upModeLoding = true
      updateModel({ classifyId: this.classifyId }).then((res) => {
        let code = res.data.code
        if (code == 200) {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
        }
        this.upModeLoding = false
      }).catch(() => {
        this.upModeLoding = false
      })
    },
    LastLevelList(classifyId) {
      aiClassifyManageLevel({ classifyId }).then((res) => {
        if (res.data.success) {
          const num = res.data.data
          const arr = []
          for (let i = 1; i <= num; i++) {
            let obj = {
              label: i + '级',
              value: i,
            }
            arr.push(obj)
          }
          this.options = arr
          if (arr.length > 0) {
            this.form.level = arr[0].value
          } else {
            this.form.level = ''
          }
        }
      })
    },
    init(classifyId) {
      this.classifyId = classifyId
      this.LastLevelList(classifyId)
      this.reduction()
    },
    interFaceDoc() {
      // this.$router.push({
      //   path: '/interfaceDescription/aiClassificationModel',
      //   query: {
      //     classifyId: this.classifyId,
      //     type: '1',    //智能分类点击按钮跳转
      //   }
      // })
      this.swichInterFacePage('1', this.classifyId)
    },
    setModelValue(data) {
      this.detailsData = data
    },
  },

};
</script>

<style scope lang="scss">
.version {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  // align-content: space-between;
}

.layout-flex {
  display: flex;
  align-items: flex-end
}

.title {
  font-size: 18px;
  color: #303133;
  margin-right: 20px;
}

.text {
  margin-left: 20px;
  font-size: 14px;
  color: #909399;
}

.describe {
  font-size: 14px;
  color: #606266;
  line-height: 24px;
}

.setbox {
  padding: 20px 0;
  background-color: #f1f6ff;
  border-radius: 6px;
  // min-width: 450px;
  flex-direction: column;
  width: 100%;

  .set {
    margin-left: 20px;
  }
}

.avue-form-bor {
  padding: 20px 0;
  background: white;
}

.result {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 4px;
  font-size: 14px;
  color: #565863;
}
</style>
